<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM对象操作</title>
    <style>
        .cls1{
            background: pink;
            height: 30px;
        }
    </style>
</head>
<body>
    <br>==============操作文本==============<br>
    <div id="div">我是div</div>
    <input type="button" id="btn1" value="获取div的文本">
    <input type="button" id="btn2" value="设置div的文本">

    <br>==============操作对象==============<br>
    <div id="div1"></div>
    <input type="button" id="btn3" value="添加一个span到div"> <br><br><br>

    <input type="button" id="btn4" value="将加油添加到城市列表最下方"> &nbsp;&nbsp;&nbsp;
    <input type="button" id="btn5" value="将加油添加到城市列表最上方"> &nbsp;&nbsp;&nbsp;
    <input type="button" id="btn6" value="将雄起添加到上海下方"> &nbsp;&nbsp;&nbsp;
    <input type="button" id="btn7" value="将雄起添加到上海上方"> &nbsp;&nbsp;&nbsp;
    <ul id="city">
        <li id="bj">北京</li>
        <li id="sh">上海</li>
        <li id="gz">广州</li>
        <li id="sz">深圳</li>
    </ul>
    <ul id="desc">
        <li id="jy">加油</li>
        <li id="xq">雄起</li>
    </ul>  <br><br><br>
    <input type="button" id="btn8" value="将雄起删除"> &nbsp;&nbsp;&nbsp;
    <input type="button" id="btn9" value="将描述列表全部删除"> &nbsp;&nbsp;&nbsp;


    <br>==============操作样式==============<br>
    <div style="border: 1px solid red;" id="div3">我是div</div>
    <input type="button" id="btn11" value="获取div的样式"> &nbsp;&nbsp;
    <input type="button" id="btn12" value="设置div的背景色为蓝色">&nbsp;&nbsp;
    <br><br><br>
    <input type="button" id="btn13" value="给div设置cls1样式"> &nbsp;&nbsp;
    <input type="button" id="btn14" value="给div删除cls1样式"> &nbsp;&nbsp;
    <input type="button" id="btn15" value="给div设置或删除cls1样式"> &nbsp;&nbsp;


    <br>==============操作属性==============<br>
    <input type="text" id="username">
    <br>
    <input type="button" id="btn16" value="获取输入框的id属性">  &nbsp;&nbsp;
    <input type="button" id="btn17" value="给输入框设置value属性">
    <br><br>

    <input type="radio" id="gender1" name="gender">男
    <input type="radio" id="gender2" name="gender">女
    <br>
    <input type="button" id="btn18" value="选中女">
    <br><br>

    <select>
        <option>---请选择---</option>
        <option id="bk">本科</option>
        <option id="zk">专科</option>
    </select>
    <br>
    <input type="button" id="btn19" value="选中本科">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    /*
    *   操作文本
    * */
    $("#btn1").click(function () {
        //获取div文本
        let html = $("#div").html();
        alert(html);
    });

    $("#btn2").click(function () {
        //设置div文本
        $("#div").html("<br>我真的是div<br>");
    });

    /*
    *   操作对象
    * */
    //添加一个span到div
    $("#btn3").click(function () {
        $("#div1").html("<sapn>我是一个span</sapn>");
    });

    //将加油添加到城市列表最下方
    $("#btn4").click(function () {
        // $("#city").append($("#jy"));
        $("#jy").appendTo($("#city"));
    });

    //将加油添加到城市列表最上方
    $("#btn5").click(function () {
        //$("#city").prepend($("#jy"));
        $("#jy").prependTo($("#city"));
    });

    //将雄起添加到上海下方
    $("#btn6").click(function () {
        $("#sh").after($("#xq"));
    });

    //将雄起添加到上海上方
    $("#btn7").click(function () {
        $("#sh").before($("#xq"));
    });

    //将雄起删除
    $("#btn8").click(function () {
        $("#xq").remove();
    });

    //将描述列表全部删除
    $("#btn9").click(function () {
        $("#city").empty();
    });



    /*
    *   操作样式
    * */
    //获取样式
    $("#btn11").click(function(){
        alert($("#div3").css("border"));
    });
    //设置样式
    $("#btn12").click(function(){
        $("#div3").css("background","blue");
    });

    //给指定对象添加样式类名
    $("#btn13").click(function(){
        $("#div3").addClass("cls1");
    });

    //给div删除cls样式
    $("#btn14").click(function(){
        $("#div3").removeClass("cls1");
    });

    //样式类开关
    $("#btn15").click(function(){
        $("#div3").toggleClass("cls1");
    });


    /*
    *   属性操作
    *
    * attr和prop怎么选择？

        对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。快速，准确。

        对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
    * */
    //获取输入框的id属性
    $("#btn16").click(function(){
        alert($("#username").attr("id"));
    });

    //给输入框设置value属性
    $("#btn17").click(function(){
        $("#username").attr("value","Hello JQuery");
    });

    //选中女
    $("#btn18").click(function(){
        $("#gender2").prop("checked",true);
    });

    //选中本科
    $("#btn19").click(function(){
        $("#bk").prop("selected",true);
    });

</script>
</html>